<template>
  <view class="page">
    <view class="logo">
      <image class="img" src="@/static/logo.png"></image>
    </view>
    <view class="register box">
      <u-form :model="user" label-width="auto" ref="uForm">
        <u-form-item required label="用户名" prop="username">
          <u-input v-model="user.username"></u-input>
        </u-form-item>
        <u-form-item required label="密码" prop="password">
          <u-input v-model="user.password" type="password"></u-input>
        </u-form-item>
        <u-form-item required label="确认密码" prop="re_password">
          <u-input v-model="user.re_password" type="password"></u-input>
        </u-form-item>
        <u-form-item class="option">
          <u-button open-type="getUserInfo" @getuserinfo="getUserInfo" :custom-style="btnStyle">注册</u-button>
          <view class="tips">
            还没有账号?点击
            <text class="toLogin" @click="toLogin">去登录</text>
          </view>
        </u-form-item>
      </u-form>
      <u-toast ref="uToast" />
    </view>
  </view>
</template>

<script>
import { register } from './_api/index.js';
import { buttonStyle } from '@/common/style';
export default {
  data() {
    return {
      user: {
        username: '',
        password: '',
        re_password: ''
      },
      errorType: ['message', 'toast'],
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: ['blur', 'change']
          }
        ],
        password: [
          {
            min: 6,
            max: 18,
            required: true,
            message: '请输入6-18位密码',
            trigger: 'blur, change'
          }
        ],
        re_password: [
          {
            min: 6,
            max: 18,
            required: true,
            message: '请确认密码',
            trigger: 'blur, change'
          },
          {
            validator: (rule, value, callback) => {
              return this.user.password === this.user.re_password;
            },
            message: '两次密码不一样！',
            trigger: 'blur, change'
          }
        ]
      }
    };
  },
  computed: {
    btnStyle() {
      const style = buttonStyle();
      style.width = '450rpx';
      return style;
    }
  },
  methods: {
    getUserInfo(info) {
      const { userInfo } = info.detail;
      if (userInfo) {
        const { nickName, avatarUrl } = userInfo;
        this.user = {
          ...this.user,
          headimgurl: avatarUrl,
          wx_nickname: nickName
        };
      }

      this.toRegister();
    },
    toRegister() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          register(this.user)
            .then(res => {
              this.$refs.uToast.show({
                title: '注册成功，正在跳转到登录页',
                type: 'success',
                url: '/pages/login/login'
              });
            })
            .catch(_ => {});
        } else {
          this.$refs.uToast.show({
            title: '请检查输入项',
            type: 'warning'
          });
        }
      });
    },

    toLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  }
};
</script>

<style lang="scss" scoped>
.logo {
  margin: 0 auto;
  width: 690rpx;
  display: flex;
  justify-content: center;
}
.img {
  width: 400rpx;
  height: 400rpx;
}
.register {
  margin: 0rpx auto;
  width: 690rpx;
}
.toLogin {
  cursor: pointer;
  color: blue;
}
.option {
  margin-top: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tips {
  margin-top: 10rpx;
  text-align: end;
}
</style>
